<template>
    <!-- main S -->
    <view class="main">
        <!-- search S -->
        <view class="searchBox" style="height: 50rpx;margin-bottom: 20rpx;">
            <input type="text" v-model="keyword"
                style="border: 1rpx solid red;width: 80%;margin-left: 20rpx;height: 44rpx;border-radius: 20rpx;padding-left: 10rpx;float: left;"
                placeholder="粘贴商品名称/关键词/链接搜索">
            <view class="searchBtn"
                style="float: right;margin-right: 20rpx;border: 1rpx solid blue;border-radius: 20rpx;width: 80rpx;text-align: center;font-size: 24rpx;height: 44rpx;line-height: 44rpx;"
                @click="goSearch()">
                搜索
            </view>
            <view class="clear_both">

            </view>
        </view>
        <!-- search E -->
        <!-- top S -->
        <view class="top">
            <view class="channelBox">
                <view class="channelItem" v-for="(item,index) in channel" :class="activeIndex == index?'active_text':''" @click="changeChannel(index)" :key="index">
                    <view class="box">
                        <image :src="item.logo" mode=""></image>
                        <text>{{item.title}}</text>
                    </view>
                </view>
                <view class="clear_both"></view>
            </view>
        </view>
        <!-- top E -->
        <!-- orderListBox S -->
        <view class="orderListBox" v-for="(item,index) in ProductList" :key="item.goodsId" @tap="goProductDetail(item)">
            <!-- order S -->
            <view class="order">
                <!-- center S -->
                <view class="center">
                    <view class="logo">
                        <image :src="item.img" mode=""></image>
                    </view>
                    <view class="fonts">
                        <view class="fontTwo">
                            <text>{{item.goodsName}}</text>
                        </view>
                        <view class="fontThree">
                            <text>京东价格</text>
                            <text>￥{{item.lowestPrice}}</text>
                        </view>
                        <view class="fontFour">
                            <text>平台价格</text>
                            <text>￥{{item.lowestCouponPrice}}</text>
                        </view>
                    </view>
                </view>
                <!-- center E -->
                <!-- bottom S -->
                <view class="bottom">
                    <view class="rowOne">
                        <text class="rowOneL">获得红包</text>
                        <view class="rowOneR">
                            <text>{{item.redPackage}}</text>
                        </view>
                    </view>
                </view>
                <!-- bottom E -->
            </view>
            <!-- order E -->
        </view>
        <!-- orderListBox E -->
    </view>
    <!-- main E -->
</template>

<script>
    import {
        JdProductSearch,
    } from '@/service/product.js'
	import{
		channelList
	} from '@/service/channel.js'
    import {
        getTime,
        getStorage
    } from '@/utils/utils.js'
    export default {
        data() {
            return {
                title: 'ProductList',
                activeIndex: 0,
                ProductList: [],
                // 渠道列表
                channel: [
                ],
                // 关键字
                keyword: ""
            }
        },
        onLoad(param) {
			this.channelList();
		},
        methods: {
            // 跳转到订单详情页
            goProductDetail(productDetail) {
                let productId = productDetail.goodsId;
                uni.navigateTo({
                    url: `./product_detail?productId=${productId}`
                })
            },
            // 搜索商品
            goSearch() {
                this.JdProductSearch();
            },
            // 商品搜索
            async JdProductSearch() {
                uni.showLoading({
                    'title': '搜索中',
                    'mask': true,
                })
                let {
                    data
                } = await JdProductSearch({
                    'timestamp': getTime(),
                    'keyword': this.keyword,
                    'openId': getStorage('openId'),
                    'channelId': this.channel[this.activeIndex].id,
                });
                console.log('data====================>', data)
                this.ProductList = data;
                uni.hideLoading();
            },
			// 渠道列表
			async channelList() {
			    let {
			        data
			    } = await channelList({
			        'timestamp': getTime(),
			        'openId': getStorage('openId'),
			    });
				this.channel = data;
			    // this.shortUrl = data.shortURL;
			},
			// 切换渠道
			changeChannel(channelIndex){
				let index = channelIndex;
				this.activeIndex = index;
			}
        }
    }
</script>

<style>
    /* .main{
		padding-top: 0 !important;
	} */
    .tabBox {
        width: 100%;
        border: 0rpx solid red;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        background: #FFFFFF;
    }

    .tabBox>.tab {
        display: flex;
        justify-content: center;
        border: 0rpx solid red;
        height: 80rpx;
        width: 100rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 24rpx;
    }

    .tabBox>.tab:nth-child(1) {
        margin-left: 60rpx;
    }

    .tabBox>.tab:nth-child(2) {
        margin: 0 140rpx 0 140rpx;
    }

    .orderListBox {
        width: 100%;
        border: 0rpx solid red;
        margin: 0 auto;
    }

    .orderListBox>.order {
        /* height: 300rpx; */
        width: 95%;
        border: 0rpx solid red;
        margin: 0 auto;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        background: #ffffff;
        padding-top: 10rpx;
    }

    .order>.center {
        height: 180rpx;
        width: 95%;
        border-bottom: 1rpx solid #F1F1F1;
        margin: 0 auto;
        margin-top: 20rpx;
    }

    .order>.center>.logo {
        height: 170rpx;
        width: 170rpx;
        float: left;
        margin-right: 20rpx;
    }

    .order>.center>.logo>image {
        height: 100%;
        width: 100%;
    }

    .order>.center>.fonts>text {
        display: block;
    }

    .order>.center>.fonts>.fontOne {
        margin-bottom: 5rpx;
    }

    .order>.center>.fonts>.fontOne>text:first-child {
        display: inline-block;
        border: 1rpx solid red;
        height: 40rpx;
        width: 80rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        border-radius: 20rpx;
        color: #007AFF;
        margin-right: 10rpx;
    }

    .order>.center>.fonts>.fontOne>text:last-child {
        font-size: 28rpx;
    }

    .order>.center>.fonts>.fontTwo {
        margin-bottom: 10rpx;
    }

    .order>.center>.fonts>.fontTwo>text:last-child {
        color: gray;
        display: block;
        max-height: 80rpx;
        overflow: hidden;
    }

    .order>.center>.fonts>.fontThree>text:first-child {
        font-size: 26rpx;
        color: gray;
    }

    .order>.center>.fonts>.fontThree>text:last-child {
        font-size: 30rpx;
        font-weight: bold;
        margin-left: 20rpx;
    }

    .order>.center>.fonts>.fontFour>text:first-child {
        font-size: 26rpx;
        color: gray;
    }

    .order>.center>.fonts>.fontFour>text:last-child {
        font-size: 30rpx;
        font-weight: bold;
        margin-left: 20rpx;
        color: red;
    }

    .bottom {
        height: 90rpx;
        width: 95%;
        border: 0rpx solid red;
        margin: 0 auto;
    }

    .bottom>.rowOne {
        height: 80rpx;
        width: 100%;
        border: 0rpx solid blue;
        /* line-height: 80rpx; */
    }

    .bottom>.rowOne>.rowOneL {
        float: left;
        margin-left: 20rpx;
        color: gray;
        line-height: 80rpx;
    }

    .bottom>.rowOne>.rowOneR {
        display: block;
        float: right;
        margin-right: 20rpx;
        border: 0rpx solid red;
        padding-left: 20rpx;
        margin-top: 20rpx;
        border-radius: 20rpx;
        /* background-color: rgba(246, 203, 144, 0.3); */
    }

    .bottom>.rowOne>.rowOneR>text:first-child {
        margin-right: 20rpx;
        font-size: 24rpx;
        color: red;
        font-weight: bold;
        line-height: 40rpx;
        height: 40rpx;
    }

    .bottom>.rowOne>.rowOneR>text:last-child {
        display: inline-block;
        border: 0rpx solid red;
        width: 122rpx;
        border-radius: 20rpx;
        text-align: center;
        height: 48rpx;
        line-height: 48rpx;
        color: #FFFFFF;
        background-color: rgba(238, 153, 34, 1);
        font-size: 24rpx;
        font-weight: bold;
    }

    .bottom>.rowTwo {
        border-top: 1rpx solid #F1F1F1;
        width: 95%;
        margin: 0 auto;
        height: 50rpx;
        margin-top: 10rpx;
        padding-top: 10rpx;
    }

    .bottom>.rowTwo>text:first-child {
        font-size: 26rpx;
        color: gray;
        float: left;
        line-height: 50rpx;
    }

    .bottom>.rowTwo>text:last-child {
        font-size: 20rpx;
        color: #000000;
        float: right;
        border: 0rpx solid blue;
        width: 80rpx;
        text-align: center;
        height: 30rpx;
        margin-top: 10rpx;
        margin-right: 20rpx;
        line-height: 30rpx;
        border-radius: 20rpx;
        background-color: #F1F1F1;
    }


    .active {
        color: red;
        font-size: 30rpx;
        border-bottom: 1rpx solid #F0AD4E !important;
    }

    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    .top {
        background-color: #FFFFFF;
        width: 95%;
        margin: 0 auto;
        border-radius: 25rpx;
        padding-top: 30rpx;
    }

    .top>.channelBox {
        border: 0rpx solid red;
        width: 90%;
        margin: 0 auto;
        margin-top: 30rpx;
    }

    .channelBox>.channelItem {
        float: left;
        width: 25%;
    }

    .channelItem>.box {
        float: left;
        border: 0rpx solid red;
        text-align: center;
        margin-bottom: 30rpx !important;
        margin: 0 auto;
        margin-left: 20rpx;
    }

    .box>image {
        height: 120rpx;
        width: 120rpx;
    }

    .box text {
        display: block;
        font-size: 20rpx;
        margin-top: -6rpx;
    }
	
	.active_text {
	    border: 2rpx solid blue;
	}
</style>
